﻿<MContainer Fluid>
	<MRow Justify="JustifyTypes.Center">
		<MSubheader>
			Today
		</MSubheader>
		<MExpansionPanels PopOut>
			@foreach(var message in Messages)
			{
				<MExpansionPanel>
					<MExpansionPanelHeader HideActions>
						<MRow Align="AlignTypes.Center" Class="spacer" NoGutters>
							<MCol Cols="4" Sm="2" Md="1">
								<MAvatar Size="36">
									@if(!string.IsNullOrWhiteSpace(message.Avatar)) 
									{
										<MImage Alt="Avatar" Src="@message.Avatar"></MImage>
									} 
									else 
									{
										<MIcon Color="@message.Color">@message.Icon</MIcon>
									}
								</MAvatar>
							</MCol>

							<MCol Class="hidden-xs-only" Sm="5" Md="3">
								<strong>@message.Name</strong>
								@if(message.Total > 0) 
								{
									<span class="grey--text">@($"({message.Total})")</span>
								}
							</MCol>

							<MCol Class="text-no-wrap" Cols="5" Sm="3">
								@if(message.New > 0) 
								{
									<MChip Color="@($" {message.Color} lighten-4 ")" Class="ml-0 mr-2 black--text" Label Small>@($"{message.New} new")</MChip>
								}
								<strong>@message.Title</strong>
							</MCol>

							@if(!string.IsNullOrWhiteSpace(message.Excerpt)) 
							{
								<MCol Class="grey--text text-truncate hidden-sm-and-down">@message.Excerpt</MCol>
							}
						</MRow>
					</MExpansionPanelHeader>

					<MExpansionPanelContent>
						<MDivider></MDivider>
						<MCardText>@_lorem</MCardText>
					</MExpansionPanelContent>
				</MExpansionPanel>
			}
		</MExpansionPanels>
	</MRow>
</MContainer>

@code
{
    private string _lorem = "Lorem ipsum dolor sit amet, at aliquam vivendum vel, everti delicatissimi cu eos." + 
		" Dico iuvaret debitis mel an, et cum zril menandri. Eum in consul legimus accusam. Ea dico abhorreant duo," + 
		" quo illum minimum incorrupte no, nostro voluptaria sea eu. Suas eligendi ius at, at nemore equidem est." + 
		" Sed in error hendrerit, in consul constituam cum.";

    private class MessageDemo
    {
        public int Key { get; set; }
        public string Avatar { get; set; }
        public string Color { get; set; }
        public string Icon { get; set; }
        public string Name { get; set; }
        public int Total { get; set; }
        public int New { get; set; }
        public string Title { get; set; }
        public string Excerpt { get; set; }
    }

    private List<MessageDemo> Messages = new()
    {
        new () 
		{ 
			Key = 1,
			Avatar = "https://cdn.masastack.com/stack/images/website/masa-blazor/doddgu.png", 
			Name = "doddgu",
			Total = 0,
			Title = "Welcome to MASA Blazor!",
			Excerpt = " — Thank you for joining our community... "
		},
        new () 
		{ 
			Key = 2,
			Icon = "mdi-account-multiple",
			Color = "red", 
			Name = "Social",
			Total = 3,
			Title = "Twitter", 
			New = 1 
		},
        new () 
		{ 
			Key = 3,
			Icon = "mdi-tag", 
			Color = "teal", 
			Name = "Promos",
			Total = 4,
			Title = "Shop your way", 
			New = 2 
		}
    };
}